<template>
	<view class="staffList">
		<navBar isBack backColor="#fff" :title="title" color="#fff" background="transparent"></navBar>
		<view class="sL_topImg">
			<image src="https://manager.ryz1620.com/static/distri/makerCenter/bg.png" mode=""></image>
		</view>
		
		<!-- 员工列表 -->
		<view class="content_list">
			<view class="list_item" v-for="(item,index) in staffList" :key="index">
				
				<view class="item_left">
					<checkbox-group name="" @change="checkDel(index,item.checked)">
						<label>
							<checkbox :checked="item.checked"/>
						</label>
					</checkbox-group>
					<image :src="item.avatar.path?item.avatar.path:''" mode="" @tap="toStaffInfo(item.id)"></image>
					<view class="staffInfo" @tap="toStaffInfo(item.id)">
						{{item.name}}
						<span>{{item.phone}}</span>
					</view>
				</view>
				<view class="item_right">
					{{item.worksite_num}}个工地
				</view>
			</view>
		</view>
		<!-- 添加按钮 -->
		<view class="btn">
			<button type="default" @click="toAddStaff">确定</button>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue'
	import service_constr from '@/service/constr.js'
	import service_decoration from '@/service/decoration.js'
	export default{
		data(){
			return{
				title:'选择管家',
				staffList:[],
				delStatus:false, //删除按钮状态
				position:'',
				id:null, //负责人id
				order_id:null, //订单id
				old_builder:null, //原施工员id
				other_id:null
			}
		},
		onShow() {
			this.getStaffList()
		},
		onLoad(options) {
			this.position = options.position;
			this.id = options.id;
			this.other_id = options.other_id;//另一个负责人id，防止多职位
			this.order_id = options.order_id;
			this.old_builder = options.old_builder;
			this.title = options.position==1?'选择管家':'选择工长';
			this.getStaffList()
		},
		methods:{
			// 获取员工列表
			getStaffList(){
				let decoration_id = this.$store.state.index.sid;
				console.log(decoration_id)
				service_decoration.getStaffList({decoration_id,position:this.position}).then(res=>{
					console.log(res)
					if(res.code==1){
						res.data.map(item=>{
							item.checked = false
						})
						this.staffList = res.data?res.data:[]
					}
				})
			},
			
			// 选择管家或者工长
			toAddStaff(){
				let that = this
				let delId=[]
				let indexArr = []
				this.staffList.map((item,index)=>{ //获取员工的id
					if(item.checked){
						delId.push(item.id)
						indexArr.push(index)
					}
				})
				// let id = delId.join(',');
				// console.log(id)
				if(delId.length<1){
					uni.showToast({title:'请选择员工',icon:'none'})
					return
				}else{
					if(delId.length>1){
						uni.showToast({title:'只能选择一个员工',icon:'none'})
						return 
					}else{
						if(!this.old_builder){ //如果是第一次添加
							let res = this.staffList[indexArr[0]]
							if(this.other_id==res.id){
								uni.showToast({
									title:'不可多职位',
									icon:'none'
								})
								return
							}
							console.log(res,'第一次选择的负责人')
							let person = {
								avatar:res.avatar,
								name:res.name,
								builder_id:res.id
							}
							let pages = getCurrentPages();  //获取所有页面栈实例列表
							console.log(pages)
							let nowPage = pages[ pages.length - 1];  //当前页页面实例
							let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
							console.log(prevPage)
							if(this.position==1){
								prevPage.$vm.personCharge1 = person;
							}else{
								prevPage.$vm.personCharge2= person;
							}
							uni.navigateBack({
								delta: 1
							});
						}else{ //更换
							if(this.other_id==delId[0]){
								uni.showToast({
									title:'不可多职位',
									icon:'none'
								})
								return
							}
							if(this.old_builder==delId[0]){
								uni.navigateBack({
									delta:1
								})
								return
							}
							let params = {
								id:this.id,
								order_id:this.order_id,
								builder_id:delId[0],
								position:this.position,
								old_builder_id:this.old_builder?this.old_builder:''
							}
							console.log(params)
							service_constr.changePerson(params).then(res=>{
								if(res.code==1){
									setTimeout(function(){
										uni.showToast({
											title:'更换成功',
											icon:'success'
										})
									},500)
									uni.navigateBack({
										delta: 1
									});
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				}
			},
			
			// check按钮
			checkDel(index,check){
				this.staffList.map(item=>{
					item.checked = false
				})
				if(check){
					this.staffList[index].checked = false
				}else{
					this.staffList[index].checked = true
				}
			},
			
			// 员工信息
			toStaffInfo(id){
				uni.navigateTo({
					url:`./staffInfo?id=${id}`
				})
			},
		}
	}
</script>

<style lang="scss">
	page{height: 100%;width: 100%;}
	.staffList{
		width: 100%;
		height: 100%;
		background-color: #fff;
		.sL_topImg{width: 100%;height: 194rpx;position: fixed;top: 0;left: 0;z-index: 2;image{width: 100%;height: 100%;}}
		
		
		// 员工列表
		.content_list{
			// height: 100%;
			background-color: #fff;
			margin-top: 18rpx;
			margin-bottom: 115rpx;
			padding: 40rpx 0 0 32rpx;
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
			.list_item{
				padding: 32rpx 32rpx 32rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F6F7FB;
				.item_left{
					checkbox{margin-right: 10rpx;}
					display: flex;
					align-items: center;
					image{width: 96rpx;height: 96rpx;border-radius: 50%;}
					.staffInfo{
						margin-left: 16rpx;
						display: flex;
						flex-direction: column;
						font: 400 28rpx/40rpx PingFang SC;
						color: #333333;
						span{font: 400 24rpx/34rpx PingFang SC; color:#939393;}
					}
				}
				.item_right{
					width: 206rpx;
					height: 80rpx;
					text-align: center;
					background-color: #F9F6F3;
					font: 400 24rpx/80rpx PingFang SC;
					color:#666666;
				}
			}
		}
		
		// 添加按钮
		.btn{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 0 24rpx 0 34rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
			button{
				// margin: 20rpx auto;
				width: 606rpx;
				height: 80rpx;
				background-color: #E7AD14;
				border-radius: 46rpx;
				font: 500 32rpx/80rpx PingFang SC;
				color: #fff;
				margin: 10rpx 0;
			}
		}
	}
</style>
